import { useState } from "react";
import { Form, Input, Button, message } from "antd";
import { login, register } from "@/api/login";
import { LoginTitle } from "@/types";
import useLoginStore from "@/store/login";
import { useRouter } from "@/hooks/useRouter";

export default function LoginForm() {
  const [title, setTitle] = useState(LoginTitle.LOGIN);
  const [form] = Form.useForm();
  const { setToken } = useLoginStore();
  const router = useRouter();
  // 表单提交事件
  const onFinish = async (values: any) => {
    try {
      // 登录
      if (title === LoginTitle.LOGIN) {
        const data = await login(values);
        
        message.success(data.msg);
        setToken(data.data.token);
        router.push("/");
      } else {
        // 注册
        const data = await register(values);
        console.log(data);
        
        // message.success(data.msg);
      }
    } catch (error: any) {
      message.warning(error.message || error);
    }
  };
  return (
    <div className="w-full pl-24 pr-24">
      <div className="flex flex-col gap-[20px]">
        <div className="text-[24px] font-bold">{title}</div>
        <Form form={form} onFinish={onFinish}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入用户名!" }]}
          >
            <Input className="h-12" placeholder="Username" />
          </Form.Item>
          {title === LoginTitle.REGISTER ? (
            <Form.Item
              name="email"
              rules={[{ required: true, message: "请输入邮箱!" }]}
            >
              <Input className="h-12" placeholder="Email" />
            </Form.Item>
          ) : null}
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码!" }]}
          >
            <Input className="h-12" placeholder="Password" />
          </Form.Item>
          {title === LoginTitle.REGISTER ? (
            <Form.Item
              name="repeatPassword"
              rules={[{ required: true, message: "请输入密码!" }]}
            >
              <Input className="h-12" placeholder="Repeat Password" />
            </Form.Item>
          ) : null}
          <Form.Item className="w-full">
            <Button className="w-full h-12" type="primary" htmlType="submit">
              {title}
            </Button>
          </Form.Item>
          <div className="flex justify-end  ">
            <div className="cursor-pointer pt-2 pb-2 pl-4 pr-4 hover:text-[#0082ee]/80 text-base border-[1px] rounded-md border-[#f5f5f5]  hover:border-[1px]  hover:border-[#e5e6eb] ">
              <span
                className="text-[#0082ee] "
                onClick={() =>
                  setTitle(
                    title === LoginTitle.LOGIN
                      ? LoginTitle.REGISTER
                      : LoginTitle.LOGIN
                  )
                }
              >
                {title === LoginTitle.LOGIN
                  ? "Sign up"
                  : "Already have an account?"}
              </span>
            </div>
          </div>
        </Form>
      </div>
    </div>
  );
}
